<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        #content {
            width: 600px;
            height: 400px;
            background: linear-gradient(to right,pink,rgb(27, 108, 146));
            margin: 100px auto;
            text-align: center;
            position: relative;
            line-height: 300px;
            color: rgb(89, 59, 159);
            font-size: 70px;
        }

        #btn1 {
            background: #ccc;
            width: 180px;
            height: 80px;
            font-size: 30px;
            color: #f40;
            border-radius: 12px;
            position: absolute;
            bottom: 30px;
            left: 50%;
            margin-left: -90px;

        }
    </style>
</head>

<body>
    <div id="content">
        <span id="span1">
            点击开始
        </span>
        <button id="btn1">
            start
        </button>
    </div>
    <script>
        var btn1 = document.querySelector("#btn1");
        var flag=false;
        var timer;
        function randomNum(min,max) {
                        return parseInt(Math.random() * (max+1 - min)) + min;
                    }
        btn1.onclick = function () {
            flag=!flag
            if (flag==true) {
                timer = setInterval(function () {
                    btn1.innerText="end";
                    var arr = ["孙悟空", "猪八戒", "唐僧", "沙和尚", "张三", "王五","余斯琪", "张锦航", "谢小航", "山里的闲人", "蜘蛛精", "白骨精"];
                    var res = randomNum(0, arr.length - 1);
                    document.querySelector("#span1").innerText = `${arr[res]}`;
                },100)
            }else if(flag==false){
                clearInterval(timer);
                btn1.innerText="start"
            }
        }

    </script>
</body>

</html>